<template>
  <div>
      <h3>会员等级列表</h3>
      <div>
        姓名：<input type="text" v-model="queryInfo.name"> 
        <input type="button" value="查询" @click="getList">
      </div>
      <table border="1">
        <tbody>
          <tr>
            <td>用户名</td>
            <td>等级名称</td>
            <td>手机号</td>
            <td>邮件</td>
            <td>添加时间</td>
          </tr>
          <tr v-for="item in list">
            <td>{{ item.name }}</td>
            <td>{{ item.djPeople }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.email}}</td>
            <td>{{ moment(item.createTime).format("YYYY-MM-DD") }}</td>
          </tr>
        </tbody>
      </table>
      <div>
        <span>总页数：{{  totalPage }}</span>
        <span>总条数：{{  totalCount }}</span>  

        <span>每页{{ queryInfo.pageIndex }}/{{ totalPage }}条</span>

        <select @change="changeSize" v-model="queryInfo.pageSize">
          <option :value="item" v-for="item in arr">每页{{ item }}条</option>
        </select>

        <input type="button" value="首页" @click='goPage("home")'>
        <input type="button" value="上一页"  @click='goPage("prev")'>
        <input type="button" value="下一页" @click='goPage("next")'>
        <input type="button" value="尾页" @click='goPage("end")'>
        <input type="text" v-model="page">
        <input type="button" value="GO" @click='goPage(page)'>
      </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';

const route = useRoute();
const router = useRouter();

let data:any = reactive({
  queryInfo:{
    name:'',
    pageIndex:1,
    pageSize:2
  },
  list:[],
  totalCount:0,
  totalPage:0,
  page:1,
  arr:[2,4,6,8],
})

let {queryInfo,list,totalCount,totalPage,page,arr} = toRefs(data)

onMounted(()=>{
  getList()
})

//页容量的改变

const changeSize = ()=>{
  queryInfo.value.pageIndex = 1;
  getList()
}
//分页

const goPage = (str:any)=>{

  switch(str){
    case 'home':
      if(queryInfo.value.pageIndex == 1){
        alert("已经到第一页了");
        return
      }
      queryInfo.value.pageIndex = 1;
      break;

    case 'prev':
      if(queryInfo.value.pageIndex == 1){
        alert("已经到第一页了");
        return
      }
      queryInfo.value.pageIndex--;
      break;

    case 'next':
      if(queryInfo.value.pageIndex == totalPage.value){
        alert("已经到最后一页了");
        return
      }
      queryInfo.value.pageIndex++;
      break;
    case 'end':
      if(queryInfo.value.pageIndex == totalPage.value){
        alert("已经到最后一页了");
        return
      }
      queryInfo.value.pageIndex = totalPage.value;
      break;
    case str:
      if(str == ""){
        alert("页码不能为空");
        return
      }
      if(isNaN(str) == true){
        alert("页码只是数字")
        return
      }

      if(str > totalPage.value || str <1){
        alert("页码只是1到"+ totalPage.value +"之间的数字");
        return
      }

      queryInfo.value.pageIndex = str;
      break;
  }

  getList()
  page.value = queryInfo.value.pageIndex;
}

//获取列表
const getList = ()=>{
  let obj = {
    name:queryInfo.value.name,
    pageIndex:queryInfo.value.pageIndex,
    pageSize:queryInfo.value.pageSize
  }
  axios({
    url:'/api/Deng/GetDeng',
    method:'get',
    params:obj
  })
  .then(res=>{
    console.log(res);
    list.value = res.data.data
    totalCount.value = res.data.totalCount
    totalPage.value = res.data.totalPage
  })
  .catch(err=>{
    console.log(err);
  })
}


</script>
